import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement, random } from './store/actions/counter';

import { addTodo } from './store/actions/todos';

// 导入一个使用了redux数组的组件
import { Child1 } from './Child1';

export const App = () => {
  // 获取 redux store 当中存储的数据
  const state = useSelector((state) => state.counter);
  // console.log(state);
  // 获取todos
  const todos = useSelector((state) => state.todos);
  // 获取分发action的dispatch
  const dispatch = useDispatch();

  return (
    <div>
      {todos.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}

      <button onClick={() => dispatch(addTodo({ id: 2, text: '睡觉' }))}>
        添加todo
      </button>
      <h1>{state}</h1>
      <button onClick={() => dispatch(increment(1))}>增加</button>
      <button onClick={() => dispatch(decrement(1))}>减少</button>
      <button onClick={() => dispatch(random())}>随机</button>
      <hr />
      <Child1 />
    </div>
  );
};
